<template>
  <div class="box">
    <!-- 搜索 -->
    <div class="search">
      <input type="text" class="ipbtn" v-model="value" />
      <button class="btn" @click="search">搜索</button>
    </div>
    <!-- 表格 -->
    <table border="1px" class="table">
      <tr>
        <th>商品名</th>
        <th>
          单价 <span @click="sortTop">↑</span>&ensp;
          <span @click="sortbott">↓</span>
        </th>
        <th>
          销量 <span @click="sortTop">↑</span>&ensp;
          <span @click="sortbott">↓</span>
        </th>
      </tr>
      <tr v-for="(item, index) in tabList" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.sales }}万</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      listArr: [], //总数据
      tabList: [], //表格数据
      value: "",
    };
  },
  created() {
    // 请求数据
    this.$axios.get("data.json").then((res) => {
      // console.log(res);
      this.listArr = res.data.data;
      this.tabList = res.data.data;
    });
  },
  mounted() {},
  methods: {
    // 搜索
    search() {
      this.tabList = this.listArr.filter((item) =>
        item.name.includes(this.value)
      );
    },
    // 价格升序
    sortTop(val) {
      // console.log(val);
      this.tabList.sort((a, b) =>
        val ? b.price - a.price : a.price - b.price
      );
    },
    // 价格降序
    sortbott(val) {
      this.tabList.sort((a, b) =>
        val ? a.price - b.price : b.price - a.price
      );
    },
  },
  computed: {},
};
</script>
<style scoped lang='scss'>
.box {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  margin: 50px auto;
  .search {
    width: 400px;
    margin-left: 100px;
    margin-top: 20px;
    .ipbtn {
      width: 200px;
      height: 30px;
    }
    .btn {
      height: 34px;
      width: 60px;
      margin-left: 20px;
    }
  }
  .table {
    text-align: center;
    width: 480px;
    height: 400px;
    margin-left: 10px;
    margin-top: 30px;
  }
  .table tr th span {
    padding: 0 6px;
    background-color: pink;
    color: #fff;
  }
}
</style>
